<template>
  <div>
    <!-- 订单处理列表 -->
    <el-table :data="orderProcessingList" height="540" border style="width: 100%">
        <el-table-column 
            :label="header" 
            v-for="header in tableHeader" :key="header" 
            :prop="getPropName(header)"
            width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.orderStatus)">
              {{ getStatusText(scope.row.orderStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
              <el-button size="mini" @click="handleApprove(scope.row)">通过</el-button>
              <el-button size="mini" @click="handleReject(scope.row)">驳回</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
        <el-pagination
            @size-change="changePageSize"               
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[2, 3, 4, 5,7,9]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>    
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableHeader: ['订单ID','陪玩','老板','游戏类型','礼物','客服','备注','创建时间'],  
      orderProcessingList:[],
      count:0,        //总条数
      params:{
          pageNum:1,      //当前页
          pageSize:9,     //页容量
          tenantId: 1
      },
    }
  },
  methods:{
    // 根据表头获取对应的属性名
    getPropName(header){
      const mapping = {
        '订单ID': 'id',
        '陪玩': 'playmateName',
        '老板': 'bossName',
        '游戏类型': 'gameTypeName',
        '礼物': 'giftName',
        '客服': 'customerServiceName',
        '创建时间': 'createTime',
        '备注': 'orderNote'
      }
      return mapping[header];
    },
    // 加载订单处理列表
     async loadorderProcessingList() {
      const res = await this.customerServiceApi.queryAllOrderInfo(this.params);
      if (res.code == 200) { 
        this.orderProcessingList = res.data.list.filter(item => 
          [2].includes(item.orderStatus)
        );
        this.count = res.data.total;
      }else{
        this.$message.error(res.message);
      }
     },
   
    //搜索
    handleSearch() {
      this.loadorderProcessingList();
    },
    // 重置搜索条件
    resetSearch() {
      this.params.pageNum = 1;
      this.loadorderProcessingList();
    },
     // 改变页大小
    changePageSize(val) {
      this.params.pageSize = val;
      this.params.pageNum = 1; // 重置到第一页
      this.loadorderProcessingList();
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.loadorderProcessingList();
    },
    handleApprove(row) {
      this.handleEdit(row, 3);
    },
    handleReject(row) {
      this.handleEdit(row, 8);
    },
    handleEdit(row,status) {
      this.$prompt('请输入处理原因:', '处理订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]{1,50}$/,
        inputErrorMessage: '原因不能超过50个字符'
      }).then(({ value }) => {
        const orderHandleDto = {
          orderId: row.id,
          actionType: 1,
          status: status, /// 3=通过, 8=驳回
          note: value,
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          tenantId: 1 
        };
        this.handleOrderRequest(orderHandleDto);
      }).catch(() => {
        this.$message.info('取消处理');
      });
    },
    async handleOrderRequest(data) {
      try {
        const res = await this.customerServiceApi.handOrderRequests(data);
        if (res.code == 200) {
          this.$message.success(res.message);
          this.loadorderProcessingList();
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        this.$message.error('提交失败');
      }
    },
    getStatusText(status) {
      const map = {
        0: '已发布',
        1: '游戏中',
        2: '审核中',
      };
      return map[status] || '未知';
    },
    getStatusType(status) {
      const map = {
        0: 'warning',   // 已发布
        1: 'success',   // 游戏中
        2: 'info'       // 审核中
      };
      return map[status] || 'info';
    }
  },
  created(){
    this.loadorderProcessingList();
  }
};
</script>

<style scoped>
.search-bar {
  padding: 5px 0; /* 减小上下内边距 */
}

.demo-form-inline {
  display: flex;
  align-items: center;
  gap: 8px; /* 减小组件之间的间距 */
}

.el-form-item {
  margin-top: 0; /* 移除默认的顶部外边距 */
  margin-bottom: 0; /* 移除默认的底部外边距 */
}

.el-select .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-input .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-button {
  height: 30px; /* 进一步减小高度 */
  padding: 0 10px; /* 减小内边距 */
  font-size: 12px;
}
</style>
